<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <div class="chaxun">
        <el-form-item label="微信号" prop="nickName">
          <el-input
            v-model.trim="form.nickName"
            placeholder="微信号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="getUserList"
            type="primary"
            icon="el-icon-search"
            class="jy"
            size="mini"
            >查询</el-button
          >
          <el-button class="jy" size="mini" @click="rest">
            <i class="el-icon-refresh"></i>
            重置</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <el-table
      :data="userList"
      border
      style="width: 100%"
      max-height="600"
      class="tab"
    >
      <el-table-column prop="id" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="nickName" label="微信号" align="center">
      </el-table-column>
      <el-table-column prop="image" label="菜品图片" align="center">
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover">
            <img :src="scope.row.image" class="imgs" />
            <img
              slot="reference"
              :src="scope.row.image"
              style="max-height: 50px; max-width: 150px"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="菜品名称" align="center">
      </el-table-column>
      <el-table-column prop="flavor" label="口味" align="center">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in JSON.parse(scope.row.flavor)"
            :key="index"
          >
            {{ item
            }}<span v-if="index < JSON.parse(scope.row.flavor).length - 1"
              >、</span
            >
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model.number="scope.row.status"
            active-color="#ff4949"
            inactive-color="#13ce66"
            :active-value="0"
            :inactive-value="1"
            active-text="禁用"
            inactive-text="启用"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量" align="center">
      </el-table-column>
      <el-table-column prop="amount" label="金额(RMB)" align="center">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 6, 7, 8]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getSelectAll } from "../../api/shopping";
export default {
  data() {
    return {
      form: { nickName: "" },

      userList: [],
      //当前页码
      current: 1,
      //当前条数
      size: 5,
      //总条数
      total: 0,
    };
  },
  methods: {
    rest() {
      this.userId = null;
    },

    handleSizeChange(val) {
      this.size = val;
      this.getSelectAll();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getSelectAll();
    },
    getUserList() {
      this.getSelectAll();
      this.current = 1;
    },
    async getSelectAll() {
      let result = await getSelectAll(
        this.current,
        this.size,
        this.form.nickName
      );
      this.userList = result.data.pageList.records;

      this.total = result.data.pageList.total;

      console.log(this.userList);
    },
  },
  created() {
    this.getSelectAll(this.current, this.size);
  },
};
</script>

<style lang="less" scoped>
.el-input {
  width: 200px;
  height: 30px;
}

.chaxun {
  display: flex;
}
.el-select {
  width: 120px;
}
.jy {
  height: 30px;
  margin-left: 20px;
}
.imgs {
  width: 300px;
  height: 150px;
}
</style>